<template>
  <a-card :bordered="false">
    <h3>更新面料</h3>
    <div>

      <!--第一行-->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="面料编号">
              <a-input placeholder="请输入面料编号" v-model="fabricDetail.fabricCode"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="供应商面料编号">
              <a-input style="width: 165px" placeholder="" v-model="fabricDetail.gysfabriccode"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="供应商">
              <a-select
                style="width: 183px"
                v-model="fabricDetail.sysuserId"
              >
                <a-select-option :value="item.id.toString()" v-for="(item,key) in gyslist" :key="item.id">
                  {{ item.realname }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <!--第二行-->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="面料类型">
              <a-select
                ref="select"
                @change="handleChange"
                style="width: 186.76px"
                v-model:value="fabricDetail.fabricTypeId"
              >
                <a-select-option :label="item.fabricTypeName" :value="item.id.toString()"
                                 v-for="(item,key) in fabricTypeList"
                                 :key="item.id">
                  {{ item.fabricTypeName }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item :required="true" label="是否进口">
              <a-radio-group name="radioGroup" v-model="fabricDetail.isimport">
                <a-radio :value="0">
                  国产
                </a-radio>
                <a-radio :value="1">
                  进口
                </a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料排序">
              <a-input-number style="width: 183px" placeholder="" v-model="fabricDetail.paixu"></a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <!--第三行-->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item label="面料产地">
              <a-input placeholder="请输入面产地" v-model="fabricDetail.fabricSource"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料品牌">
              <a-input placeholder="" v-model="fabricDetail.pingpai"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料成分">
              <a-input v-model="fabricDetail.fabricContent"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--    <h3>面料材质</h3>-->
    <div>

      <!--第四行-->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item label="面料纱织">
              <a-input v-model="fabricDetail.fabricShazhi"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料克重">
              <a-input min="0" v-model="fabricDetail.fabricWeight"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料门幅">
              <a-input placeholder="" v-model="fabricDetail.menfu"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <!--啥子？555-->
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :md="8" :sm="12">
            <a-form-item label="面料颜色">
              <a-input placeholder="" v-model="fabricDetail.fabriceColor"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料花型">
              <a-input v-model="fabricDetail.hua"></a-input>
            </a-form-item>
          </a-col>

          <a-col :md="8" :sm="12">
            <a-form-item label="面料季节">
              <a-input placeholder="" v-model="fabricDetail.season"></a-input>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

    </div>
    <!--<h3>其他</h3>-->
    <a-form layout="inline">
      <a-form-item label="面料图片">
        <j-image-upload class="avatar-uploader" text="上传" v-model="fabricDetail.fabricImg"
                        style="margin-top: 8px;"></j-image-upload>
      </a-form-item>
    </a-form>

    <a-form layout="inline">
      <a-row :gutter="24">
        <!--        <a-col :md="7" :sm="12">
                  <a-form-item label="面料名称">
                    <a-input v-model="fabricDetail.fabricName"></a-input>
                  </a-form-item>
                </a-col>-->

        <a-col :md="8" :sm="12">
          <a-form-item label="库存(米)">
            <a-input-number :min="0" suffix="米" v-model="fabricDetail.inventory"></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>

    <a-row :gutter="24">
      <a-col :md="8" :sm="12">
        <a-form-item label="备注">
          <a-input type="textarea" :auto-size="{ minRows: 3, maxRows: 10 }" v-model="fabricDetail.remark"></a-input>
        </a-form-item>
      </a-col>
    </a-row>

    <div>
      <a-button @click="addFabric">提交</a-button>
    </div>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import {getAction} from "../../api/manage";
import JImageUpload from '../../components/jeecg/JImageUpload'

export default {
  name: "UpdateFabric",
  components: {
    JImageUpload
  },
  created() {
    this.getFabricType()
    this.getgys()
    this.getData()
  },
  data() {
    return {
      fabrictypeid: '', // 面料类型ID
      fabricTypeList: [], // 面料类型列表
      fit: 'contain',
      elimage: true,
      gyslist: [], // 查询到的供应商列表
      fabricDetail: {},// 面料详情
      url: {
        fabricType: '/fabric/getFabricTypeList', // 面料类型列表
        gysList: '/fabricCenter/selectGYS', // 供应商列表
        updateFabric: '/fabricCenter/updateFabric', // 更新面料的接口
        fabricDetail: '/fabricCenter/getFabricDetail' // 面料详情
      },
      value: '0',
      previewVisible: false,
      previewImage: '',
      fileList: '',
    }
  },
  methods: {
    /**
     * 获取面料类型
     */
    getFabricType() {
      getAction(this.url.fabricType).then(res => {
        if (res.code == '0') {
          this.fabricTypeList = res.data
        }
      })
    },

    getData() { // 获取面料详情
      getAction(this.url.fabricDetail, {'fabricID': this.$route.query.fabric}).then(res => {
        if (res.code == '200') {
          this.fabricDetail = res.result
          this.fabricDetail.fabricTypeId = res.result.fabricTypeId + ""
        }
      })
    },
    addFabric() { // 编辑面料
      var i = this.checkData()
      if (i == 1) {
        return
      } else {
        getAction(this.url.updateFabric, {
          'id': this.$route.query.fabric,
          'fabricCode': this.fabricDetail.fabricCode,
          'fabricSource': this.fabricDetail.fabricSource,
          'pingpai': this.fabricDetail.pingpai,
          'sysuserId': this.fabricDetail.sysuserId,
          'isimport': this.fabricDetail.isimport,
          'fabricContent': this.fabricDetail.fabricContent,
          'fabricShazhi': this.fabricDetail.fabricShazhi,
          'fabricWeight': this.fabricDetail.fabricWeight,
          'fabricImg': this.fileList == '' ? this.fabricDetail.fabricImg : this.fileList,
          'fabricName': this.fabricDetail.fabricName,
          'inventory': this.fabricDetail.inventory,
          'remark': this.fabricDetail.remark,
          'fabriceColor': this.fabricDetail.fabriceColor,
          'fabricTypeId': this.fabricDetail.fabricTypeId,
          'hua': this.fabricDetail.hua,
          'menfu': this.fabricDetail.menfu,
          'season': this.fabricDetail.season,
          'paixu': this.fabricDetail.paixu,
          'gysfabriccode': this.fabricDetail.gysfabriccode
        }).then(res => {
          if (res.code == '200') {
            this.$message.success("编辑成功")
            this.$router.go(-1)
          } else {
            this.$message.error("面料编号与其他面料重复")
          }
        })
      }
    },
    getgys() { // 获取供应商列表
      getAction(this.url.gysList).then(res => {
        this.gyslist = res.result
      })
    },
    handlePictureCardPreview(file) {
      this.fabricDetail.fabricImg = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    //上传图片成功函数
    handleSuccess(response, file, fileList) {
      var result = response;
      this.fabricDetail.fabricImg = result.data;
      this.elimage = false
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      this.$message.warning("上传文件超出限制");
    },
    // 数据校验
    checkData() {
      if (this.fabricDetail.fabricCode == '') {
        this.$message.warning("请填写面料编号")
        return 1
      }
      if (this.fabricDetail.gysfabriccode == '') {
        this.$message.warning("请填写供应商写面料编号")
        return 1
      }
      if (this.fabricDetail.gysid == '') {
        this.$message.warning("请选择供应商")
        return 1
      }
      if (this.fabricDetail.fabrictypeid == '') {
        this.$message.warning("请选择面料类型")
        return 1
      }
      if (this.fabricDetail.isjinkou == '') {
        this.$message.warning("请选择是否进口")
        return 1
      }
    },
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';

table {
  left: 20px;
  align-content: center;
  width: 70%;
}

td {
  margin-left: 10px;
}
</style>